<template>
   <div
    class="header"
    :style="{
      backgroundImage: `url(${sellerIofo.avatar})`,
    }"
  >
        <div class="mask"></div>
        <div class="info">
            <div class="pic">
                <img :src="sellerIofo.avatar" alt="商家logo"/>
            </div>
            <div clas="title">
                <h2>{{ sellerIofo.name}}</h2>
            </div>
            <div class="center">
              <p class="p1">{{sellerIofo.description
}}</p>
            </div>
            <div class="cenrig">
              /38分钟内送达
            </div>
            <div class="bot">
             <p class="p3"><span>满</span>在线支付满28减5，满50减10</p>
            </div>
        </div>
        <div class="tips">
            <p class="p2">
                {{sellerIofo.bulletin}}
            </p>
        </div>
    </div>
    
</template>

<script>
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
    //    bg: this.sellerIofo.avatar,
    };
  },
  created() {
    this.getSeller();
  },
  computed: {
    ...mapState(["sellerIofo"]),
  },
  methods: {
    ...mapActions(["getSeller", "getGoods"]),
  },
};
</script>

<style lang="less" scoped>
.header{
    // background-color: aquamarine;
 height: 130px;
//   background: #333;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
//mask
  //使头部出现玻璃化的的样式
.mask{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top:0;
    //模糊
    background-color: rgba(7,17,27,0.5);
    backdrop-filter: blur(10px);
}
  //info
  .info{
    position: absolute;
    width: 100%;
    left:0;
    top:0;
    height: 100%;
    display: flex;
    //img
    img{
    width: 65px;
    height: 65px;
    padding-left: 15px;
    padding-top: 25px;
    //pic
    .pic{
    padding: 24px 0px 0px 24px;
}
//
}

  }
//tips
.tips{
    position: absolute;
    color: aliceblue;
    bottom: 0;
    left: 0;
    // height: 22px;
    width: 100%;
    font-size: 10px;
    padding-left: 12px;
    background-color: rgba(7,17,27,0.2);
}


    //p
    .p2{
    height: 30px;
      line-height: 30px;
      width: 85%;
      //文本超出显示三个点
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      //在文档前面添加内容
      &::before {
        content: "公告:";
        width: 20px;
        height: 15px;
        color: gray;
        background-color: #fff;
        // padding-right: 10px;
      }
}
}
h2{
    padding-top: 22px;
    color: #fff;
    padding-left: 15px;
    font-size: 20px;
    &::before {
        content: "品牌";
font-size: 17px;
width: 30px;
height: 20px;
background-color: red;
padding-right: 10px;
text-align: center;
}
}
.p1{
  position: absolute;
  color: aliceblue;
  top: 50px;
  left: 95px;
}
.cenrig{
  color: #fff;
  position: absolute;
  top: 50px;
  left: 170px;
  font-size: 17px;
}
.p3{
  position: absolute;
  color: #fff;
  top:75px;
  left: 95px;
  font-size: 15px;
}
.p3>span{
  color: red;
  padding-right: 5px;
  width: 15px;
  height: 10px;
  background-color: #fff;
  font-size: 15px;
  text-align: center;
}
</style>